<template>
	<view class="content">
		<!-- <input class="search-input" type="text" placeholder="搜索.."> -->
		  
		<view class="center-list">
			<view  style="background-color: #F8F8F8;">
				<view class="search-all">
					<img src="../../static/search.png" alt="" class="search-img">
					<input class="search" placeholder="请输入关键字" value=""/>
				</view>
			</view>
			
			<view class="gap-shadow">
			</view>
			
			<view class="center-list-item-com gap-shadow-com">
				<text class="list-icon">
					<img src="../../static/computer.png" alt="" class="img-computer">
				</text>
				<text class="message-computer">Windows 微信已登录</text>
			</view>
			
			<view class="center-list-item">
				<view style="width: 10%; float: left;">
					<text class="list-icon">
						<img src="../../static/img/1.jpg" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name">Makiii</text>				
					<text class="message-time">14:44</text>
				</view>		
			</view>
			<view class="center-list-item">
				<view style="width: 10%; float: left;">
					<text>
						<img src="../../static/img/1.jpg" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name">Makiii</text>				
					<text class="message-time">14:44</text>
				</view>		
			</view>
			<view class="center-list-item">
				<view style="width: 10%; float: left;">
					<text>
						<img src="../../static/img/1.jpg" alt="" class="img-icon">
					</text>	
				</view>
				
				<view style="width: 90%; float: left;" class="gap-shadow-com">	
					<text class="message-name">Makiii</text>
					<text class="message-time">14:44</text>
				</view>		
			</view>
		</view>
		
		
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.img-icon{
		height: 55upx;
		width: 55upx;
		margin-top: 8px;
	}
	.img-computer{
		height: 40upx;
		width: 40upx;
	}

	.message-time{
		margin-left: 460upx;
		margin-top: 20upx;
		font-size: 30upx;
	}
	.message-name {
		font-size: 25upx;
		font-weight:bold;
		margin-left: 18upx;
		margin-top: 15upx;
	}
	.message {
		margin-top: 50upx;
	}
	
	.center-list-item-com{
	height: 75upx;
	width: 100%;
	box-sizing: border-box;
	flex-direction: row;
	padding: 0upx 20upx;
	}
	
	.message-computer {
		font-size: 25upx;
		margin-top: 20upx;
		margin-left: 20upx;
	}
	.search {
		margin-top: 20upx;
		font-size: 25upx;
		
	}
	.search-img{
		height: 40upx;
		width: 40upx;
		margin-top: 10px;
		margin-left: 250upx;
	}
	.search-all {
		width: 730upx;
		height: 65upx;
		margin:0 auto;
		border:1px solid #E6E6E6;
		border-radius:1upx;
		background-color: #ffffff;
	}
	.gap-shadow {
		height: 6px;
		background: #F8F8F8;
	}
	.gap-shadow-com {
		border-bottom-width: 1upx;
		border-color: #e6e6e6;
		border-bottom-style: solid;		
	}
</style>
